<!DOCTYPE html>
<html lang="en">
    <script src="js/echarts.js"></script>
    <script src="js/jquery.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<head>
<!-- <%-- Echarts数据展示页面 --%> -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="images/icon.ico" type="/image/x-icon" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <title>Account - Orders Management Display System</title>
</head>
<body>
<main>
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" style="width: 20%;min-width: 150px">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
            <span class="fs-4">Orders Management Display System</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="overview.html" class="nav-link link-dark" aria-current="page">
                    Overview
                </a>
            </li>
                <a href="account.html" class="nav-link dark">
                    Accounts
                </a>
            </li>
            <li>
                <a href="manage.html" class="nav-link link-dark">
                    All Orders
                </a>
            </li>
            <li>
                <a href="query.html" class="nav-link link-dark">
                    Orders Query
                </a>
            </li>
            <li>
                <a href="echarts.html" class="nav-link active">
                  Chart Display
                </a>
              </li>
            <li>
                <a href="file.html" class="nav-link link-dark">
                    File
                </a>
            </li>
        </ul>
        <hr>
        
        <div class="dropdown">
            <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
            </a>
            <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
                <li><a class="dropdown-item" href="setting.html">Settings</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><form method="post" action="api/logout-control">
                    <button class="dropdown-item" type="submit" value="logout" name="logout">Logout</button>
                </form></li>
            </ul>
        </div>
    </div>

    <!-- <div class="d-flex flex-grow-1 p-4 allow-rolling">
        <div class="d-flex flex-column flex-grow-1">
            <div class="d-flex flex-row">
                <h1 class="flex-column flex-grow-1">Chart Display</h1>
            </div>
        <div class="flex-grow-1">
    </div>
    </div> -->
    
     <!-- 表单，选择Y或者N以展示有效或无效的商品种类及其数量 -->
     <form method="post">
        <select id="name">
            <option type="checkbox" value="Y">Y</option>
            <option type="checkbox" value="N">N</option>
        </select>
        <button class="btn btn-success" onclick="getSelectedValue()">提交</button>
    </form>

    <div id="Echarts_3" style="width: 1000px;height: 800px;" > </div>
        
</main>
<script type="text/javascript">
    var flag;  //定义全局变量获取表单选中的值
    function getSelectedValue(){
        var obj=document.getElementById("name");
        flag = obj.value;
    }

    var myChart = echarts.init(document.getElementById('Echarts_3'));

    // 临时数据：以下有效订单的各总类数量
    var dataY = {
        dataGoods: [{
            name: 'goods1',  //某有效商品名
            value: '272'     //商品件数
        }, {
            name: 'goods2',
            value: '292'
        }, {
            name: 'goods3',
            value: '120'
        }, {
            name: 'goods4',
            value: '42'
        }, {
            name: 'goods5',
            value: '88'
        }, {
            name: 'goods6',
            value: '92'
        }]
    };

    // 临时数据：以下无效订单的各总类数量
    var dataN = {
        dataGoods: [{
            name: 'goods1',  //某无效商品名
            value: '212'     //商品件数
        }, {
            name: 'goods2',
            value: '23'
        }, {
            name: 'goods3',
            value: '120'
        }, {
            name: 'goods4',
            value: '99'
        }, {
            name: 'goods5',
            value: '18'
        }, {
            name: 'goods6',
            value: '230'
        }]
    };
    var option = {
        backgroundColor: '',    //背景色使用界面背景
        grid: {
            left: '20%'
        },
        color: ['#2AC9FD', '#76FBC0', '#35C96E', '#FCC708', '#48B188', '#5957C2', '#4A5D73'],
        series: [
            {
                color: ['#2AC9FD', '#76FBC0', '#35C96E', '#FCC708', '#48B188', '#5957C2'],
                type: 'pie',
                radius: ['62', '100'],
                labelLine: {
                    normal: {
                        length: 25,
                        length2: 120,
                        lineStyle: {
                            type: 'solid'
                        }
                    }

                },
                label: {
                    normal: {
                        formatter: (goods)=>{   //遍历商品，获取商品名以及其比例
                            console.log(goods);
                            return '{b| '+goods.name+'}  ' + '{c|'+ goods.value +'件}'
                        },
                        borderWidth: 0,
                        borderRadius: 4,
                        padding: [0, -86],
                        height: 70,
                        fontSize: 13,
                        align: 'center',
                        color: '#3494BD',
                        rich: {
                            b: {
                                fontSize: 12,
                                lineHeight: 20,
                                color: '#41B3DC',
                                padding: [0, 0, 5, 0]
                            },
                            c: {
                                fontSize: 20,
                                lineHeight:20,
                                color: 'orange'
                            }

                        }
                    }
                },

                    data: dataY.dataGoods,
                //     data: dataN.dataGoods;

            }
            // ,
            // {
            //     type: 'pie',
            //     radius: ['110', '111'],
            //     data: [100],
            //     label: {
            //         show: false
            //     }
            // },
            // {
            //     type: 'pie',
            //     radius: ['50', '51'],
            //     data: [100],
            //     label: {
            //         show: false
            //     }
            // }
        ]
    };
    //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>
</body>
</html>
